<template>
  <div id="serialport">
    <el-container>
      <el-aside width="200px" class="aside">
        <v-chuankou @message="message" ref="chuankou" @open="setOpen"></v-chuankou>
      </el-aside>
      <el-main>
        <div class="mssage-analysis aside" v-show="analysis">
          <button class="el-icon-close" @click="analysis = false"></button>
          <p>
            <button @click="showScript = true; tmpScript = script || tmpScript ">编辑解析脚本</button> 
            <button @click="runScript = !runScript" :disabled="!script">{{runScript ? '停止执行' :'执行解析'}}</button>
          </p>
          <div class="analysis-cont">
            <span class="script-error" v-if="analysisError">
              {{ analysisError }}
            </span>
            <template v-else>
              <p v-for="(val, key) in alaysisCont" :key="key">
                <span>{{key}}：</span> 
                <span>{{val}}</span>
              </p>
            </template>
          </div>
          <el-dialog title="编辑解析脚本" append-to-body :visible="showScript" width="450px" :before-close="closeScript">
            <textarea v-model="tmpScript" class="script">asdsd</textarea>
            <span slot="footer">
              <button @click="script = tmpScript; showScript=false">确定</button>
            </span>
          </el-dialog>
        </div>
        <div class="message-box">
          <p :class="i.type" v-for="i in queue" :key="i.time" >
            <span>
              <i class="el-icon-caret-left" v-if="i.type=='msg'"></i>
              <i class="el-icon-caret-right" v-else></i>
              {{i.msg}}
              <font><em class="el-icon-alarm-clock"></em> {{ i.time }}</font>
            </span>
          </p>
        </div>
        <div class="sender-box">
          <textarea v-model="send"></textarea>
          <div class="right">
            <p class="top">
              <button @click="sender(send)" :disabled="!open || !send">发送</button>
              <select class="select" v-model="encoding">
                <option :value="i" v-for="i in ['hex','ascii', 'utf8', 'base64', 'binary']" :key="i">{{ i }}</option>
              </select>
              <button @click="queue = []">清空窗口</button>
              <button @click="analysis = true" style="margin-left: 5px">报文解析</button>
            </p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
module.exports = {
  components: {
    "v-chuankou":httpVueLoader('../common/chuankou.vue')
  },
  data(){
    return{
      alaysisCont: {},
      script: "",
      showScript: false,
      queue:[],
      runScript: false,
      send: "",
      open: false,
      encoding: 'utf8',
      analysis: false,
      analysisError: "",
      tmpScript: `msg => {
  let doct = [
    { name : "帧头", unit: "", },
    { name : "运行时间", unit: "s", },
    { name : "UTC", unit: "", },
    { name : "航向角", unit: "°", },
    { name : "俯仰角", unit: "°", },
    { name : "横滚角", unit: "°", },
    { name : "维度", unit: "°", },
    { name : "经度", unit: "°", },
    { name : "高度", unit: "m", },
    { name : "北向速度", unit: "m/s", },
    { name : "东向速度", unit: "m/s", },
    { name : "估计误差", unit: "°", },
    { name : "X 角速率", unit: "°/s", },
    { name : "Y 角速率", unit: "°/s", },
    { name : "Z 角速率", unit: "°/s", },
    { name : "X 轴比力", unit: "g", },
    { name : "Y 轴比力", unit: "g", },
    { name : "Z 轴比力", unit: "g", },
    { name : "系统温度", unit: "℃", },
    { name : "GPS 经度", unit: "°", },
    { name : "GPS 纬度", unit: "°", },
    { name : "GPS 北速", unit: "m/s", },
    { name : "GPS 东速", unit: "m/s", },
    { name : "GPS 航向", unit: "°", },
    { name : "深沉高度", unit: "m", },
    { name : "GPS 星数", unit: "", }
  ]
  let arr = msg.split(','), obj = {}
  for(let i in doct){
    obj[doct[i].name] = (arr[i] || '--') + doct[i].unit
  }
  return obj
}
      `
    }
  },
  watch: {
    queue: {
      handler(val){
        if(this.runScript){
          this.setAlaysisCont(val[0].msg)
        }
      },
      deep: true
    }
  },
  methods: {
    closeScript(){
      this.showScript = false
    },
    setAlaysisCont(msg){
      let res = {}
      try{
        this.analysisError = '';
        res = eval(this.script)(msg)
      }catch(err){
        this.analysisError = "脚本执行错误"
      }
      this.alaysisCont = res;
    },
    message(msg){
      if(this.queue.length > 500){
        this.queue.pop()
      }
      this.queue.unshift({
        type: 'msg',
        msg,
        time: new Date().Format('yyyy-MM-dd hh:mm:ss.S')
      })
    },
    setOpen(flag){
      this.open = flag
    },
    sender(msg){
      if(!msg || !this.open) return
      this.queue.unshift({
        type: 'send',
        msg,
        time: new Date().Format('yyyy-MM-dd hh:mm:ss.S')
      })
      this.$refs.chuankou.sender(msg, this.encoding)
    }
  }
}
</script>
<style lang="less">
#serialport{
  width: 100%;
  height: 100%;
  p{
    padding: 0;
    margin: 0;
  }
  .el-container{
    height: 100%;
  }
  .aside{
    background-color: rgba(255,255,255,.3);
    border-right: 1px solid rgba(0,0,0,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.2) inset;
    user-select: none;
  }
  .el-main{
    padding: 0;
    height: 100%;
    position: relative;
    .sender-box{
      user-select: none;
      width: 100%;
      height: 89px;
      background-color: rgba(255,255,255,.6);
      box-shadow: 0px 1px 0 rgba(255,255,255,.9) inset;
      border-top: 1px solid rgba(0,0,0,.3);
      textarea{
        outline: none;
        border: 1px solid rgba(0,0,0,.5);
        border-radius: 0;
        width: calc(~"100% - 400px");
        max-width: calc(~"100% - 400px");
        min-width: calc(~"100% - 400px");
        height: 67px;
        max-height: 67px;
        min-height: 67px;
        margin: 8px;
        display: block;
        float: left;
      }
      .right{
        float: left;
        height: 73px;
        margin: 8px;
        width: 370px;
        margin-left: 0;
        p{
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;
          &.top{
            select{
              margin-top: -1px;
              margin: 0 5px;
            }
          }
        }
      }
    }
    .mssage-analysis{
      position: absolute;
      width: 280px;
      height: calc(~"100% - 110px");
      padding: 10px;
      box-shadow: 2px 0 10px rgba(0,0,0,.2);
      background-color: rgba(184, 184, 184, 0.2);
      z-index: 10;
      backdrop-filter:blur(10px);
      .analysis-cont{
        width: 100%;
        height: calc(~"100% - 45px");
        position: absolute;
        overflow-y: auto;
        bottom: 0;
        border-top: 1px solid rgba(0,0,0,.3);
        left: 0;
        .script-error{
          color: #f00;
          width: 100%;
          display: block;
          text-align:  center;
          padding: 10px 0;
        }
        p{
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgba(0,0,0,.3);
          span{
            display: block;
            box-sizing: border-box;
            color: #000;
            text-indent: 10px;
            overflow: hidden;
            height: 25px;
            line-height: 25px;
          }
          span:nth-child(1){
            width: 35%;
            background-color: rgba(0,0,0,.1);
            color:#000
          }
        }
      }
      .el-icon-close{
        padding: 3px;
        position: absolute;
        right: -21px;
        top: -1px;    
        box-shadow: 0px -5px 10px rgba(0,0,0,.2) inset, 2px 0 10px rgba(0,0,0,.2);
      }
    }
    .message-box{
      width: 100%;
      margin: 0;
      height: calc(~"100% - 100px");
      background-color: rgba(255,255,255,.8);
      overflow-y: auto;
      overflow-x: hidden;
      word-break: break-all;
      color: #000;
      padding-bottom: 10px;
      position: relative;
      p.msg,p.send{
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 12px;
        span{
          padding:5px 10px;
          display: inline-block;
          box-shadow: 0 0 5px rgba(0,0,0,.2);
          margin-top: 10px;
          margin-left: 10px;
          background-color: #fff;   
          border-radius: 2px;
          position: relative;
          max-width: 80%;
          font{
            display: block;
            color: #999;
            font-size: 11px;
            margin-top: 5px;
          }
          i{
            color: #fff;
            position: absolute;
            left: -8px;
            font-size: 14px;
          }
        }
      }
      p.send{
        display: flex;
        justify-content: flex-end;
        span{
          background-color: #d3ffdf;
          margin-right: 10px;
          i{
            color: #d3ffdf;
            right: -8px;
            left: unset;
          }
        }
      }
    }
  }
}
</style>
